<template>
  <customContainer :config="config" />
  <orderDetailDialog ref="orderDetailVueRef" />
</template>

<script setup lang="ts" name="AirSeaTransportDetail">
import { ref, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { ElButton } from 'element-plus'
import orderDetailDialog from './components/OrderDetailDialog.vue'
import { getSeaAirTransportFinanceAccountDetail } from '@/api/finance/receiverManange'

const {
  appContext: {
    config: {
      globalProperties: { $download },
    },
  },
} = getCurrentInstance()
const route = useRoute()
const orderDetailVueRef = ref(null)
const config = ref({
  query: {
    fields: [
      {
        // type: 'select',
        label: '客户名称',
        prop: 'customerCode',
        // option: {
        //   dictInfo: { dict: DictDirection.客户 },
        // },
      },
      {
        label: '销售产品',
        prop: 'zdbh',
      },
      {
        label: '客户单号',
        prop: 'ywymc',
      },
      {
        type: 'date-picker',
        label: '创建时间',
        prop: 'zdsj',
        option: {
          type: 'date',
        },
      },
    ],
    queryParams: {
      pageSize: 10,
      pageNum: 1,
      khmc: undefined,
      zdbh: undefined,
      ywymc: undefined,
      zdsj: undefined,
      sszd: undefined,
      zdzt: undefined,
      qd: undefined,

      serialNo: route.params.serialNo,
      type: 2,
    },
    formOption: {},
  },
  btns: [
    {
      title: '导出',
      type: 'primary',
      onClick(e) {
        const data = config.value.query.queryParams
        $download('finance/seaAirTransportFinanceAccount/listExport', data, `空海运订单详情_${ new Date().getTime() }.xlsx`)
      },
    },
  ],
  table: {
    columns: [
      { type: 'selection', width: '55' },
      { label: '创建时间下单时间', align: 'center', prop: 'createDate' },
      { label: '客户名称', align: 'center', prop: 'customerName' },
      { label: '单价', align: 'center', prop: 'unitPrice' },
      { label: '总实重', align: 'center', prop: 'receivingTotalWeight' },
      { label: '总材积重', align: 'center', prop: 'receivingTotalWood' },
      { label: '总计费重', align: 'center', prop: 'receivingTotalCharging' },
      { label: '总件数', align: 'center', prop: 'receivingTotal' },
      { label: '单报总金额', align: 'center', prop: 'singleReportAmount' },
      { label: '附加费', align: 'center', prop: 'surcharge' },
      { label: '应收总金额', align: 'center', prop: 'amount' },
      { label: '客户单号', align: 'center', prop: 'waybillNo' },
      { label: '主转单号', align: 'center', prop: 'mainTransferOrderNo' },
      { label: '销售产品', align: 'center', prop: 'marketProducts' },
      { label: '国家', align: 'center', prop: 'consigneeCountry' },
      { label: '收货站点', align: 'center', prop: 'site' },
      { label: '邮编', align: 'center', prop: 'consigneePostcode' },
      { label: '是否报关件',
        align: 'center',
        prop: 'customsDeclaration',
        formatter(row) {
          return row.customsDeclaration == '1' ? '是' : '否'
        } },
      { label: '备注', align: 'center', prop: 'remarks' },
      {
        label: '操作',
        align: 'center',
        width: '200',
        fixed: 'right',
        render(h, params) {
          return [
            h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  orderDetailVueRef.value.open(params)
                },
              },
              {
                default: () => '订单详情',
              },
            ),
            h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                },
              },
              {
                default: () => '单票剔除',
              },
            ),
          ]
        },
      },
    ],
    event: {
      onRowClick(e) {
        console.log(e)
      },
    },
  },
  api: getSeaAirTransportFinanceAccountDetail,
})

</script>